<template>
	<view class="login">
		<uni-card>
			<view class="top">
				<h1>欢迎登录</h1>
				<navigator style="margin-top: 5px;color: blue;" url="/pages/register/register">注册账号</navigator>
			</view>
			<uni-forms :modelValue="formData" ref="form">
				<uni-forms-item label="账号" required name="param">
					<uni-easyinput v-model="formData.param" name="param" placeholder="请输入账号" clearable />
				</uni-forms-item>
				<uni-forms-item label="密码" required name="年龄">
					<uni-easyinput type="password" name="password" v-model="formData.password" placeholder="请输入密码" />
				</uni-forms-item>
			</uni-forms>
			<view class="check">
				<checkbox-group @change="checkboxChange">
					<label>
						<checkbox :value="isAuto" :checked="checked" style="transform:scale(0.7);margin-left: 50px;" />
						<text>自动登录</text>
					</label>
				</checkbox-group>

			</view>
			<view class="login-bottom">
				<button type="primary" size="mini" @click="login">登录</button>
				<button type="default" size="mini" @click="reset">重置</button>
			</view>

		</uni-card>

	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				formData: {
					param: '',
					password: ''
				},
				checked: false,
				isAuto: true,
				loginRules: {
					param: {
						rules: [{
							required: true,
							errorMessage: '请输入账号'
						}, {
							validateFunction: function(rule, value, data, callback) {
								let reg = /^[\u4e00-\u9fa5a-zA-Z0-9]{2,12}$/

								if (!reg.test(value)) {
									callback('账号格式不正确')
								}
								return true
							}
						}]
					},
					password: {
						rules: [{
								required: true,
								errorMessage: '请输入密码'
							},
							{
								validateFunction: function(rule, value, data, callback) {
									let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,15}$/

									if (!reg.test(value)) {
										callback('密码格式不正确')
									}
									return true
								}
							}
						]
					}
				}
			};
		},
		onReady() {
			this.$refs['form'].setRules(this.loginRules)
		},
		mounted() {
			this.autoLogin()
		},
		methods: {
			...mapMutations('my_Info', ['setUserInfo']),
			checkboxChange(e) {
				console.log(e.detail.value);
				if (e.detail.value[0] == "true") {
					this.checked = true
				} else {
					this.checked = false
				}
			},
			login() {
				this.$refs['form'].validate().then(async (result) => {

					let {
						data: res
					} = await uni.$http.post('/users/login', this.formData)
					if (res.code == 2000) {

						if (this.checked) {
							uni.setStorageSync('autoLogin', JSON.stringify(this.checked))
						}

						this.setUserInfo(res.data)
						uni.switchTab({
							url: '/pages/home/home'
						})
						uni.showToast({
							title: '登录成功',
							duration: 1500,
							icon: 'success'
						})

					} else {
						uni.showToast({
							title: '账号或密码错误',
							duration: 1500,
							icon: 'error'
						})
					}

				}).catch(err => {
					console.log(err, 'err');
				})

			},
			// 自动登录
			async autoLogin() {
				if (JSON.parse(uni.getStorageSync('autoLogin')) == true) {
					let {
						data: res
					} = await uni.$http.get('/users/autoLogin')
					if (res.code == 2000) {
						uni.switchTab({
							url: '/pages/home/home'
						})
					}
				} else {
					return
				}
			},
			reset() {
				this.formData.param = ""
				this.formData.password = ''
			},
		}

	}
</script>

<style lang="less">
	.login {
		width: 100%;
		height: 900rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.uni-forms {
			width: 550rpx;
			padding-top: 8px;
		}

		.top {
			display: flex;
			justify-content: space-between;

		}

		h1 {
			font-weight: 700;
			font-size: 24px;
			margin-bottom: 8px;
		}

		.login-bottom {
			margin-top: 10px;
			display: flex;
			justify-content: space-around;
		}
	}
</style>
